<template>
    <div class="prod-list-component">
        <div class="prod-list-box"
             v-for="(item, index) in lists"
             :key="index"
             @click="productJump(item)">
            <div class="prod-list-container">
                <div class="getTime vux-1px-b" v-if="item.applyTime">点击时间：{{item.applyTime}}</div>
                <div class="prod-box">
                    <div class="prod-logo">
                        <img :src="item.content[0]" alt="logo">
                    </div>
                    <div class="prod-info">
                        <div class="prod-title-box">
                            <span class="prod-title">{{ item.content[1] }}</span>
                            <span v-if="item.content[2]" class="prod-tag vux-1px">{{ item.content[2] }}</span>
                        </div>
                        <div class="prod-content">
                            <div class="content-left">
                                <div>{{ item.content[3] }}：<span class="high-light">{{ item.content[4] }}</span></div>
                                <div>{{ item.content[7] }}</div>
                            </div>
                            <div class="content-right">
                                <div>{{ item.content[5] }}：<span class="high-light">{{ item.content[6] }}</span></div>
                                <div>{{ item.applyNumber }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="gutter" v-if="gutter"></div>
        </div>
        <div class="nothing" v-if="showNone">
            <img src="../../assets/img/nothing.png" alt="这里什么都没有哦">
            <p>这里什么都没有</p>
        </div>
    </div>
</template>

<script>
    /**
     * Created by 吴彦祖 on 2018/3/16.
     * 组件的命名 项目名（F---filean) + 组件的描述（区别与框架的组件）
     * 全局的产品列表----可见设计规范图
     * 这是产品列表
     * @params
     * @lists {Array} 渲染的数据
     * @gutter {Boolean} 每个产品之间是否需要间距
     *
     */
    export default {
        name: 'f-product-list',
        props: {
            lists: {
                type: Array,
            },
            gutter: {
                type: Boolean,
                default: false
            },
            showNone: {
                type: Boolean,
                default: false
            }
        },
        methods: {
            // 产品的点击的跳转
            productJump(item) {
                this.$emit('on-click-prodItem', item);
            }
        }
    }
</script>

<style lang="less">
    @import '../../style/mixin.less';

    .vux-1px:before {
        border-radius: @border-radius-normal-size;
    }

    .prod-list-component {
        background-color: @color-white;
        .nothing {
            padding-top: 50px;
            text-align: center;
            img {
                width: 120px;
                height: auto;
            }
            p {
                font-size: @font-size-small;
                line-height: 30px;
                color: @color-text-third;
            }
        }
        .prod-list-box {
            min-height: 88px;
            .gutter {
                height: 10px;
                background-color: @color-background-default;
            }
            .prod-list-container {
                box-sizing: border-box;
                padding: 0 12px;
            }
            .getTime {
                height: 32px;
                line-height: 32px;
                font-size: @font-size-small;
                color: @color-text-placeholder-red;
            }
            .prod-box {
                .flexLayout(flex-start, center, row);
                box-sizing: border-box;
                padding: 14px 0;
                .prod-logo {
                    width: 64px;
                    height: 64px;
                    border-radius: @border-radius-normal-size;
                    text-align: center;
                    img {
                        width: 64px;
                        height: 64px;
                    }
                }
                .prod-info {
                    margin-left: 15px;
                    .prod-title-box {
                        margin-bottom: 5px;
                        .flexLayout();
                        .prod-title {
                            font-size: @font-size-medium;
                            .ellipsis(145px);
                        }
                        .prod-tag {
                            margin-left: 10px;
                            box-sizing: border-box;
                            color: @color-primary-light;
                            padding: 2px 2px 1px;
                            font-size: @font-size-tiny;
                            text-align: center;
                            vertical-align: middle;
                        }
                        .vux-1px:before {
                            border-radius: 0 !important;
                            border: 1Px solid @color-primary-light !important;
                        }
                    }
                    .prod-content {
                        .flexLayout(flex-start, center, row);
                        div {
                            div {
                                color: @color-text-third;
                                .high-light {
                                    color: @color-text-placeholder-red !important;
                                }
                                span {
                                    font-size: @font-size-small;
                                }
                            }
                        }
                        .content-left {
                            width: 155px;
                        }
                        .content-right {
                            width: 110px;
                            .high-light {
                                transform: scale(0.9);
                                font-size: 12px;
                            }
                        }
                    }
                }
            }
        }
    }

    @media only screen
    and ( min-device-width: 320Px )
    and ( max-device-width: 320Px )
    and ( -webkit-min-device-pixel-ratio: 1 )
    and ( orientation: portrait ) {
        .prod-list-component {
            .prod-list-box {
                .prod-box {
                    .prod-info {
                        margin-left: 5px;
                        .prod-title-box {
                            margin-bottom: 5px;
                            .prod-title {
                                display: inline-block;
                                width: 120px !important;
                                font-size: @font-size-medium;
                                transform: scale(0.9);
                            }
                            .prod-tag {
                                margin-left: 5px;
                            }
                        }
                        .prod-content {
                            .flexLayout(flex-start, center, row);
                            div {
                                div {
                                    color: @color-text-third;
                                    .high-light {
                                        color: @color-text-placeholder-red;
                                    }
                                    span {
                                        font-size: @font-size-small;
                                    }
                                }
                            }
                            .content-left {
                                width: 120px !important;
                                font-size: 12px;
                                transform: scale(0.9);
                                .high-light {
                                    transform: scale(0.9);
                                    display: inline-block;

                                }
                            }
                            .content-right {
                                /*margin-left: 8px;*/
                                width: 119px !important;
                                transform: scale(0.9);
                                .high-light {
                                    transform: scale(0.9);
                                    font-size: 12px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>
